<template>
  <!-- 报警处理 处理-->
  <view class="pwd-retrieve-container">
    <view class="hidden-title">报警信息</view>
    <view class="background-white">
      <view class="bor-btm"
        >编号：<text>{{ detail.alarmCode || '--' }}</text></view
      >
      <view class="bor-btm"
        >分类：<text>{{ detail.alarmClassify || '--' }}</text></view
      >
      <view class="bor-btm"
        >摄像机名称：<text>{{ detail.cameraName || '--' }}</text></view
      >
      <view class="bor-btm"
        >报警时间：<text>{{ detail.alarmTime || '--' }}</text></view
      >
      <view class="bor-btm"><image-upload state="view" :imageUrl="detail.image"></image-upload></view>
    </view>

    <view class="hidden-title">处理信息</view>
    <uni-forms ref="form" :rules="rules" :modelValue="formData" labelPosition="top">
      <view class="form-bg-white cu-padding-left-30 cu-padding-right-30 cu-padding-top-10">
        <uni-forms-item class="bor-btm" name="isFalseAlarm" required label="是否误报" labelWidth="120">
          <CuRadioGroup v-model="formData.isFalseAlarm" :list="isFalseAlarmOptions" @change="changeFalseAlarm" />
        </uni-forms-item>
        <uni-forms-item name="dealContent" label="处理记录" required labelWidth="120">
          <textarea v-model="formData.dealContent" class="text-area" placeholder="请输入" maxlength="50" />
        </uni-forms-item>
      </view>
    </uni-forms>
    <view class="button-wrap">
      <view class="submit-button" @click="handleConfirm">确定</view>
    </view>
  </view>
</template>

<script>
import { getAiAlarmInfoById, dealAiAlarm } from '@/api/ai-alarm'
import ImageUpload from '@/components/image-upload/index.vue'
import CuRadioGroup from '@/components/cu-radio-group/cu-radio-group.vue'

export default {
  components: {
    ImageUpload,
    CuRadioGroup
  },
  data() {
    return {
      saveLoading: false,
      detail: {},
      formData: {
        id: null,
        isFalseAlarm: false,
        dealContent: ''
      },
      isFalseAlarmOptions: [
        { label: '是', value: true },
        { label: '否', value: false }
      ],
      rules: {
        isFalseAlarm: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        },
        dealContent: {
          rules: [
            {
              required: true,
              errorMessage: '不能为空'
            }
          ]
        }
      }
    }
  },
  onLoad({ id }) {
    this.formData.id = id
    getAiAlarmInfoById(id).then((res) => {
      this.detail = res.data
    })
  },
  methods: {
    changeFalseAlarm() {
      if (this.formData.isFalseAlarm) {
        this.formData.dealContent = '误报'
      } else {
        this.formData.dealContent = ''
      }
    },
    async handleConfirm() {
      if (this.saveLoading) {
        return
      }
      await this.$refs.form.validate()
      this.saveLoading = true
      try {
        await dealAiAlarm(this.formData)
        this.$modal.showToast('操作成功')
        uni.navigateBack({
          delta: 1
        })
      } finally {
        this.saveLoading = false
      }
    }
  }
}
</script>

<style lang="scss">
.pwd-retrieve-container {
  .form-bg-white {
    background-color: #fff;

    .uni-forms-item:last-child {
      margin-bottom: 0;
    }
  }
  .background-white {
    background-color: #fff;
    padding: 20rpx 30rpx 1rpx 30rpx;

    view {
      padding: 14rpx 0;

      text {
        color: #666;
        display: inline-block;
        width: 65%;
        vertical-align: top;
      }
    }

    .bor-btm {
      display: flex;
      border-bottom: 1px solid #d5d7e3;
    }

    .photo {
      display: flex;
      justify-content: space-between;

      image {
        width: 214rpx;
        height: 214rpx;
      }
    }
  }

  .button-wrap {
    background: #fff;
    padding: 20rpx 30rpx;
    display: flex;
    .space {
      width: 50rpx;
    }
    .submit-button,
    .draft-button {
      flex: 1;
      color: #ffffff;
      line-height: 88rpx;
      text-align: center;
      border-radius: 50rpx;
      font-size: 36rpx;
    }
    .submit-button {
      background: #454a5e;
    }

    .draft-button {
      background: #c4c088;
    }
  }
}

.hidden-title {
  background: #f5f5f5;
  padding: 20rpx;
  color: #999;
}

.bor-top {
  border-top: 20rpx solid #f5f5f5;
}
</style>
